<template>
	<view class="login">
		<view class="form">
			<view class="login-top">
				<view class="loginText">
					<view class="image-box">
						<image style="width: 108upx;height: 108upx;" src="@/static/index/l.png" alt />
					</view>
					<h2>浙江高信标准版</h2>
				</view>
			</view>
			<view class="login-mid">
				<view class="loginInfo">
					<view class="login-phone">
						<image class="img" style="width: 35upx;height: 35upx;" src="@/static/index/name.png" alt />
						<input type="text" placeholder="请输入姓名" v-model="dataList.userName" />
					</view>
					<view class="login-pswd">
						<image class="img" style="width: 35upx;height: 35upx;" src="@/static/index/tel.png" alt />
						<input type="text" class="inputPassword" placeholder="请输入手机号码" v-model="dataList.fMobile" />
					</view>
					<view class="login-forget"> 姓名和手机号码须与《生产质量数字化监控系统》中保持一致</view>
				</view>
			</view>
			<view class="login-bot">
				<view class="login-new" @tap="loginFun">
					注册
					<!-- <image class="imgs img" src="../../static/index/inter.png" alt @tap="loginFun" /> -->
				</view>
			</view>
			<loading :shadeShow="shadeShow" :shadeClick="false" :backgroundColor="backgroundColor" :width="width"
				:height="height" ref="loadings" :custom="false" :type="1" @callback="callback">

			</loading>
			<view class="bottom">
				<view class="text">技术支持: 浙江高信技术股份有限公司</view>
			</view>
		</view>
	</view>
</template>

<script>
	import loading from '@/components/xuan-loading/xuan-loadings.vue'
	import {
		mapMutations
	} from 'vuex';
	export default {
		components: {
			loading
		},
		data() {
			return {
				width: '150rpx',
				height: '100rpx',
				shadeShow: true,
				backgroundColor: "transparent",
				themeColor: '#525EF9',
				logoUrl: '../../static/l.png',

				dataList: {
					userName: "", //用户姓名
					fMobile: "", // 手机号码
					fWechat: "", // openid
				},

				flag: 1,
				loading: "",
			}
		},
		onLoad(options) {
			let that = this;
			this.dataList.fWechat = options.Wechat;
			// this.getData()
		},
		methods: {
			loginFun(e) {
				uni.clearStorage();
				var that = this
				if (this.dataList.userName.trim() == "" || this.dataList.fMobile.trim() == "") {
					uni.showToast({
						title: '姓名或手机号码不能为空',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.$refs.loadings.open();
					this.$http.addWechatBaseUser(this.dataList).then(res => {
						if (res == undefined) {
							this.$refs.loadings.close();
							uni.showToast({
								title: "微信与用户未绑定！请检查姓名和手机号！",
								icon: 'none',
								duration: 2000
							});
							return false;
						} else {
							if (res.errcode == 0) {
								setTimeout(() => {
									this.$refs.loadings.close();
									uni.switchTab({
										url: '/pages/home/index?Wechat=' + this.dataList.fWechat
									});
									uni.setStorage({
										key: 'userInfo',
										data: JSON.stringify(res.data.userInfo)
									});
									uni.setStorage({
										key: 'role',
										data: JSON.stringify(res.data.rolemap)
									});

									uni.showToast({
										title: "注册成功",
										icon: 'none',
										duration: 2000
									});
								}, 3000);
							} else {
								setTimeout(() => {
									uni.showToast({
										title: res.data.loginMsg,
										icon: 'none',
										duration: 2000
									});
									this.$refs.loadings.close();
								}, 2000)
							}
						}

					}, (err) => {
						uni.showToast({
							title: "注册失败",
							icon: 'none',
							duration: 2000
						});
					})

				}
			},
			callback() {
				console.log("关闭后回掉");
			}
		}
	}
</script>

<style scoped>
	.login {
		width: 100%;
		height: 100%;
	}

	.image-box {}

	.login {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background-image: url(../../static/index/board.png);
		background-size: 100% 100%;
		text-align: center;
		color: rgb(204, 204, 204);
		overflow: hidden;
	}

	.form {
		height: 100%;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.login-top {
		flex: 2;
		position: relative;
	}

	.login-top .loginText {
		position: absolute;
		width: 99%;
		transform: translate(-50%, -50%);
		top: 77%;
		left: 50%;
	}

	.img-box {
		position: relative;
		width: 5rem;
		height: 5rem;
		margin: auto;

		border-radius: 50%;
	}

	.img-box img {
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
	}

	.login-top h2 {
		margin-top: 50upx;
		color: #171A1D;
		font-weight: 600;
		font-size: 40upx;
		letter-spacing: 4upx;
	}

	.login-mid {
		flex: 3;

		position: relative;
	}

	.login-mid .loginInfo {
		position: absolute;

		width: 100%;
		transform: translate(-50%, -50%);
		top: 48%;
		left: 50%;
	}

	.login-phone,
	.login-pswd {
		width: 80%;
		font-size: 30upx;
		background-color: #F6F9FE;
		border-radius: 58upx;
		margin: 1.5rem auto;
		box-sizing: border-box;

		padding: 1.06rem 1.2rem;
		position: relative;
		display: flex;
	}

	.login-pswd {
		margin-bottom: 24upx;
	}

	.login-phone input,
	.login-pswd input {
		font-size: 30upx;
	}

	.login-phone img {
		display: inline-block;
		vertical-align: middle;
		width: 30upx;
		height: 32upx;
	}

	.login-pswd img {
		display: inline-block;
		vertical-align: middle;
		width: 30upx;
		height: 32upx;
	}

	.login-phone input,
	.login-pswd input {
		border: none;
		outline: medium;
		background: transparent;
		color: #171A1D;
		margin-left: 40upx !important;
		font-size: 30upx;
		text-align: left;
	}

	.login-pswd .eyes {
		position: absolute;
		top: 1.1rem;
		right: 1.2rem;
	}

	/* 修改 input 框里面自带的字的字体颜色 */
	input::-webkit-input-placeholder {
		color: #9C9FA4;
	}

	.login-forget {
		width: 80%;
		font-size: 20rpx;
		color: #9C9FA4 !important;
		margin: auto;
		text-align: left;
		padding: 0 10rpx;
	}

	.login-or {
		font-size: 0.9rem;
	}

	.login-or:after {
		content: "—————";
	}

	.login-or:before {
		content: "—————";
	}

	.dynamic-code,
	.bottom {
		font-size: 0.9rem;
	}

	.login-bot {
		flex: 1;
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
	}

	.login-new {
		width: 80%;
		display: flex;

		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 34upx;
		font-weight: 600;
		letter-spacing: 4upx;
		height: 110upx;
		cursor: pointer;
		position: relative;
		background: url("@/static/index/inter.png") no-repeat;
	}






	.bottom {

		flex: 1;
		position: relative;
	}

	.bottom .text {
		position: absolute;
		width: 98%;
		font-size: 28upx;
		transform: translate(-50%, -50%);
		top: 65%;
		left: 50%;
		color: #9C9FA4;
	}

	.inputPassword {
		background: none;
		outline: none;
		border: none;
		border: none;
		outline: medium;
		background: transparent;
		margin-left: 40upx !important;
		font-size: 30upx;
	}

	.test {
		animation: 1s aaa infinite;
	}

	@keyframes aaa {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.content {}
</style>
